<template>
    <div id="app">
        <div class="center">
            <div class="head">
                <h3>
                    人气推荐
                    <small>人气爆款 不容错过</small>
                </h3>
                <!-- <a href="#">查看全部<i></i></a> -->
            </div>
            <ul>
                <li v-for="A in HomeHot">
                    <img :src="A.picture" >
                    <p>{{A.title}}</p>
                    <p>{{A.alt}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'VueProject01HomePanel',
    props:['HomeHot'],
    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style scoped lang="scss">
    #app{
        width: 100%;
        height: 541px;
        background: #fff;
        .center{
            margin: 0 auto;
            width: 1240px;
            height: 100%;
            .head{
                width: 100%;
                height: 115px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                h3{
                    // flex: 1;
                    font-size: 32px;
                    font-weight: 400;
                    margin-left: 6px;
                    height: 35px;
                    line-height: 35px;
                    small{
                        font-size: 16px;
                        color: #999;
                        margin-left: 20px;
                    }
                }
                a{
                    font-size: 16px;
                    vertical-align: middle;
                    margin-right: 4px;
                    color: #999;
                    text-decoration: none;
                    i{
                        display: inline-block;
                        width: 14px;
                        height: 14px;
                        font-size: 14px;
                        vertical-align: middle;
                        position: relative;
                        top: 2px;
                        color: #ccc;
                        margin-bottom: 6px;
                        &::before{
                            content: "\e612"
                        }
                    }
                }
            }
            ul{
                display: flex;
                justify-content: space-between;
                height: 406px;
                li{
                    width: 306px;
                    height: 406px;
                    list-style: none;
                    background: #ffffff;
                    transition: all .5s;
                    &:hover{
                        box-shadow: 0 0 20px rgb(146, 146, 146);
                        // background: #000;
                        // margin-bottom: 10px;
                        transform:translate(0,-8px)
                    }
                    img{
                        width: 306px;
                        height: 306px;
                    }
                    p{
                        font-size: 22px;
                        padding: 12px 30px 0 30px;
                        text-align: center;
                        &:nth-last-child(1){
                            color: #999;
                            font-size: 18px;
                        }
                        &:nth-of-type(1){
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                    }
                }
            }
        }
    }
</style>